<template>
  <div>
    <el-card>
      <el-container>
        <el-aside width="200px">
          <img src="../../assets/img/u2198.png" />
          <div class="userInfo">
            <i class="el-icon-collection-tag"></i>
            <span>基本信息</span>
          </div>

           <img src="../../assets/img/u2198.png" style="margin-top:130px"/>
          <div class="productpic">
            <i class="el-icon-collection-tag"></i>
            <span>商品图册</span>
          </div>
        </el-aside>
        <el-main
          ><el-descriptions
            class="margin-top"
            title="商品信息"
            :column="2"
            :size="size"
            border
          >
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-shopping-bag-1"></i>
                商品名称
              </template>
              {{productInfo.title}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                商品编号
              </template>
              {{productInfo.productCode}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                商品分类
              </template>
              <p>
              分类：{{ productInfo.categoryList[2].categoryName }} >
              {{ productInfo.categoryList[1].categoryName }}>
              {{ productInfo.categoryList[0].categoryName }}
            </p>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                库存
              </template>
              <el-tag size="small">{{productInfo.number}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-goods"></i>
                原价
              </template>
              {{productInfo.oldPrice}}
            </el-descriptions-item>
             <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-goods"></i>
                现价
              </template>
              {{productInfo.price}} 
            </el-descriptions-item>
             <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                简介
              </template>
              {{productInfo.intro}}
            </el-descriptions-item>
          </el-descriptions>
         
  


         <!-- 商品图片 -->
        
         <p style="font-size:16px;font-weight:700;margin-top:30px;margin-bottom:20px" >商品相册</p>
          <div class="demo-image">
           
            <div class="block" v-for="fit in productInfo.productPic" :key="fit">
              <!-- <span class="demonstration">{{ fit }}</span> -->
              <el-image
                style="width: 100px; height: 100px"
                :src="fit.url"
                :fit="fit"
              ></el-image>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
         fits: ['cover', 'cover', 'cover', 'cover', 'cover'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
         //编辑商品表单
      productInfo: {
        title: '',
        oldPrice: 0,
        price: 0,
        number: 0,
        //商品所属的分类数组
        categoryId: [],
        //商品的详情描述
        intro: '',
        //参数
        productAttr: [],
        //排序
        marker: '0',
        //图片数组
        productPic: [],
      },
    }
  },

  created() {
    if(this.$route.name === 'verifyInfo'){
      this.getProductList()
    }
  },

  methods: {

    //【编辑商品】获取商品数据
    async getProductList() {
      const { data: res } = await this.$http.get(
        'api/service-product/admin/product/list',
        {
          params: {
            page: 1,
            limit: 1,
            id: this.$route.params.id,
          },
        }
      )
      // console.log(res.data)

      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }

      //把数据列表赋值给catelist
      this.productInfo = res.data.records[0]
      //给图片拼接访问url
      if (this.productInfo.productPic) {
        if (this.productInfo.productPic.length > 0) {
          this.productInfo.productPic.forEach((item1) => {
            item1.url = 'http://8.134.34.190/' + item1.url
          })
        }
      }
      // //绑定动态参数
      // this.manyTableData = res1.data

      // // console.log(this.manyTableData)

      // //静态属性
      // this.onlyTableData = this.editForm.attrOnlyList

      // console.log(this.editForm)
    },
  },
}
</script>

<style lang="less" scoped>
.userInfo {
  display: block;
  position: absolute;
  top: 114px;
  left: 240px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
}
.productpic{
  position: absolute;
  top: 297px;
  left: 240px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;

}
.block{
    float: left;
}
</style>